const merge = require('webpack-merge')
const base = require('./webpack.base')
const path = require('path')
const webpack = require('webpack')
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

console.log('######################-DEV-PARAM-######################')
console.log('npm_config_speedmeasure--------', process.env.npm_config_speedmeasure)
console.log('######################-DEV-PARAM-######################')


const config = {
  devtool: false,
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    open: true, //自动打开
    hot: true, // 启用 webpack 的模块热替换特性
    inline: true, // 在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台
    host: 'localhost',
    port: 8081, //端口
    quiet: true,//配合Friendly-errors-webpack-plugin使用
    overlay: {
      // 展示编译的错误和警告
      warnings: true,
      errors: true,
    },
    historyApiFallback: true //解决除了首页ok其他bad问题
    // progress: true, //打包进度
    // colors: false,
    // modules: false,
    // children: false,
    // chunks: false,
    // chunkModules: false
  },
  plugins: [
    new webpack.EvalSourceMapDevToolPlugin({
      exclude: /node_modules/,
      module: true,
      columns: false
    }),
    new ReactRefreshPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 当开启 HMR 的时候使用该插件会显示模块的相对路径
  ]
}

process.env.npm_config_speedmeasure ? module.exports = smp.wrap(merge(base, config)) : module.exports = merge(base, config)